<template>
  <div class="yeji-con">
    <div class="yeji-title">个人业绩TOP5</div>
    <div class="yeji-chart">
      <div class="yeji-chart-item" v-for="(item, index) in chartData" :key="item.userId">
        <div class="item-left-bg">{{ index < 3 ? '' : (index + 1) }}</div>
        <div class="item-name">
          <div class="item-name-left">
            {{ item.busName }}
          </div>
          <div class="item-name-process">
            <div class="item-name-process-rate" :style="{'width': 100 - (index+1)*10 + '%'}"></div>
          </div>
        </div>
        <div class="item-amout">{{ item.userRevenue }}<span class="unit-text">元</span></div>
      </div>
    </div>
  </div>
</template>

<script>
import {getPersonData} from "@/api/home";
export default {
  data() {
    return {
      chartData: []
    }
  },
  created() {
    this.getData()
  },
  methods: {
    getData() {
      getPersonData().then(res => {
        if (res.code == 200) {
          this.chartData = res.data;
        }
      })
      //const arr = [];
      //for(let i = 0; i < 10; i++) {
      //  arr.push({
      //    id: i,
      //    name: `人名${i+1}`,
      //    amount: (i+1)*10000,
      //    percent: 100 - (i+1)*10,
      //  })s
      //}
      //this.chartData = arr.filter((item, index) => index < 5 );
    }
  }
}
</script>

<style lang="scss" scoped>
.yeji-con{
  padding: 14px 20px;
  border-radius: 12px;
  background: #fff;
  margin-bottom: 24px;
  min-height: 350px;
  .yeji-title{
    font-size: 18px;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #333333;
    line-height: 25px;
  }
  .yeji-chart{
    .yeji-chart-item{
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 49px;
      padding: 0 14px;
      border-radius: 4px;
      margin-top: 10px;
      &:nth-child(1){
        .item-left-bg{
          background: url('../../assets/images/yeji-1.png') no-repeat center;
          background-size: 100% 100%;
        }
      }
      &:nth-child(2){
        .item-left-bg{
          background: url('../../assets/images/yeji-2.png') no-repeat center;
          background-size: 100% 100%;
        }
      }
      &:nth-child(3){
        .item-left-bg{
          background: url('../../assets/images/yeji-3.png') no-repeat center;
          background-size: 100% 100%;
        }
      }
      .item-left-bg{
        width: 29px;
        height: 29px;
        background: rgba(0, 118, 255, .1);
        border-radius: 50%;
        line-height: 29px;
        text-align: center;
        color: #0076FF;
      }
      .item-name{
        flex: 1;
        display: flex;
        align-items: center;
        .item-name-left{
          width: 72px;
          margin-left: 28px;
          font-size: 16px;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #333333;
        }
        .item-name-process{
          flex: 1;
          height: 12px;
          margin-right: 24px;
          border-radius: 12px;
          background: rgba(176, 204, 229, .2);
          position: relative;
          .item-name-process-rate{
            position: absolute;
            left: 0;
            top: 0;
            width: 50%;
            height: 12px;
            border-radius: 12px;
            background: linear-gradient(90deg, #94CAFF 0%, #007DFF 100%);
          }
        }
      }
      .item-amout{
        display: flex;
        align-items: center;
        text-align: right;
        font-size: 20px;
        font-weight: bold;
        color: #333333;
        letter-spacing: 2px;
        .unit-text{
          font-size: 14px;
          color: #A0A0A0;
        }
      }
    }
  }
}
</style>
